<template>
  <MyLayout>
    <template #left>
      <div class="left">
        <a-input
          v-model:value="filterText"
          class="filterSearch"
          allowClear
          :maxlength="20"
          @change="onChangeFilter"
          placeholder="输入关键字进行查找"
        />
        <!-- :show-line="showLine" -->
        <!-- :show-icon="showIcon" -->
        <a-tree
          :tree-data="treeData"
          style="margin-top: 20px"
          :autoExpandParent="true"
          blockNode
          defaultExpandAll
          show-icon
          @select="onSelectTree"
          :fieldNames="{ children: 'child', title: 'name', key: 'id' }"
        >
          <template #icon="{ id, jdhid }">
            <template v-if="id === '1'">
              <home-filled />
            </template>
            <template v-else-if="jdhid">
              <send-outlined />
            </template>
            <template v-else="jdhid">
              <bank-outlined />
            </template>
          </template>
        </a-tree>
      </div>
    </template>
    <template #right>
      <MyMechanismTable
        v-if="!isShowPeople"
        :create-parent="createParent"
        :mechanism-data="tableData"
        :parent-id="parentId"
      />
      <MyPeopleTable v-else />
    </template>
  </MyLayout>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { filter } from "lodash";
import { getMechanismTreeData } from "@/api/teachers";
import { MechanismTreeData } from "./types/index";
import { BankOutlined, SendOutlined ,HomeFilled} from "@ant-design/icons-vue";
import MyLayout from "@/components/layout/index.vue";
import MyMechanismTable from "./mechanismTable.vue";
import MyPeopleTable from "./peopleTable.vue";

onMounted(() => {
  getMechanismTreeData().then((res: any) => {
    console.log(res);
    // 赋值给机构树的数据
    treeData.value[0].child = res.list;
    // 赋值给机构树备份的数据
    treeDataAll.value[0].child = res.list;
    // 赋值给机构表格的数据
    tableData.value = treeData.value[0].child;
  });
});
//
const createParent = ref("机构设置");
const parentId = ref("");
// 机构的表格数据
const tableData = ref<MechanismTreeData[]>([]);
// 是否显示人员表格 如果为false显示机构表格数据，如果为true显示人员表格数据
const isShowPeople = ref(false);
// 当点击某个树形节点时，将里面的子数据传递给data
const onSelectTree = (_: any, e: any) => {
  createParent.value = e.node.name;
  parentId.value = e.node.id;
  tableData.value = e.node.child;
  if (e.node.pos.split("-").length === 4) {
    isShowPeople.value = true;
  } else {
    isShowPeople.value = false;
  }
};
/**
 * 过滤功能 filterText 过滤的文本
 * onChangeFilter 搜索框的内容发生变化的时候触发的事件
 * 筛选出树形结构中包含搜索框内容的数据
 */
const filterText = ref("");
const onChangeFilter = () => {
  if (filterText.value.trim() === "") {
    treeData.value = treeDataAll.value;
  }
  treeData.value[0].child = filter(treeData.value[0].child, (item: any) => {
    return item.name.includes(filterText.value);
  });
};
/**
 *
 */

const treeData = ref<List[]>([
  {
    name: "机构设置",
    id: "1",
    child: [],
  },
]);

const treeDataAll = ref<List[]>([
  {
    name: "机构设置",
    id: "1",
    child: [],
  },
]);
interface List {
  name: string;
  id: string;
  child: MechanismTreeData[];
}
</script>

<style scoped lang="less">
:deep(svg) {
  vertical-align: middle;
}
.left {
  width: 100%;
  height: 100%;
  background-color: #fff;
  padding: 20px;
  box-sizing: border-box;
  /* 设置滚动条的样式 */
  &::-webkit-scrollbar {
    width: 6px;
  }
  /* 滚动槽 */
  &::-webkit-scrollbar-track {
    border-radius: 10px;
  }
  /* 滚动条滑块 */
}
.filterSearch {
  width: 100%;
}
</style>
